<template>
	<view>
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill">
		</image>
		<u-navbar title="检测机构详情" :autoBack="true" bgColor="transparent" :titleStyle="{ color: '#fff' }" safeAreaInsetTop
			placeholder leftIconColor="#fff"></u-navbar>

		<!-- 内容 -->
		<view class="content">
			<view class="detail-card">
				<view class="field">
					<text class="key">机构名称</text>
					<text class="val">{{ detail.organizationName }}</text>
				</view>
				<view class="field">
					<text class="key">曾用名</text>
					<text class="val">{{ detail.organizationOldName }}</text>
				</view>
				<view class="field">
					<text class="key">组织机构代码</text>
					<text class="val">{{ detail.ext5 }}</text>
				</view>
				<view class="field">
					<text class="key">手机号</text>
					<text class="val">{{ detail.phoneNumber }}</text>
				</view>
				<view class="field">
					<text class="key">固定电话</text>
					<text class="val">{{ detail.phoneNumber }}</text>
				</view>
				<view class="field">
					<text class="key">所在行政区域</text>
					<text class="val">{{ detail.region }}</text>
				</view>
				<view class="field">
					<text class="key">邮箱</text>
					<text class="val">{{ detail.mailbox }}</text>
				</view>
				<view class="field">
					<text class="key">联系人</text>
					<text class="val">{{ detail.contact }}</text>
				</view>
				<view class="field">
					<text class="key">邮编</text>
					<text class="val">{{ detail.postCode }}</text>
				</view>
				<view class="field">
					<text class="key">地址</text>
					<text class="val">{{ detail.location }}</text>
				</view>
				<!-- <view class="field">
                    <text class="key">传真</text>
                    <text class="val">{{ detail.fax }}</text>
                </view> -->
				<view class="field">
					<text class="key">通过时间</text>
					<text class="val">{{ detail.checkOkTime }}</text>
				</view>
				<!-- <view class="field">
                    <text class="key">审核有效期</text>
                    <text class="val">{{ detail.expiryDate }}</text>
                </view> -->
			</view>

			<!-- 附件列表 -->
			<!-- <view class="attachment-section">
                <view class="section-title">附件列表</view>
                <view class="attachment-list">
                    <view 
                        class="attachment-item" 
                        v-for="(file, index) in detail.attachments" 
                        :key="index"
                        @click="downloadFile(file)"
                    >
                        <u-icon name="file-text" size="32" color="#007AFF"></u-icon>
                        <text class="file-name">{{ file.name }}</text>
                    </view>
                </view>
            </view> -->
		</view>
	</view>
</template>

<script>
	import {
		jcjgdetail
	} from '@/api/sylin/index.js'
	import navbarMixin from '@/common/navbarMixin'
	export default {
		mixins: [navbarMixin],
		data() {
			return {
				detail: {
					name: '示例检测机构',
					formerName: '曾用名示例',
					orgCode: '98388348-Y',
					phone: '18315613107',
					telephone: '0535-987654',
					region: '山东省/青岛市/市南区',
					email: 'sample@test.com',
					contact: '张三',
					postcode: '266000',
					address: '山东省青岛市市南区香港中路456号',
					fax: '0535-21098765',
					approvalTime: '2023-11-15 08:30:00',
					expiryDate: '2024-11-15',
					attachments: [{
							name: '示例附件.pdf',
							url: '#'
						},
						{
							name: '示例附件.docx',
							url: '#'
						}
					]
				}
			}
		},
		onLoad(options) {
			// 如果有传入ID，则调用API获取详情
			if (options.id) {
				this.getDetail(options.id)
			}
		},
		methods: {
			// 获取详情
			async getDetail(id) {
				// TODO: 调用API获取详情
				console.log('获取详情，ID:', id)
				const res = await jcjgdetail(id)
				console.log(res)
				this.detail = res.data
			},

			// 下载文件
			downloadFile(file) {
				uni.showToast({
					title: `下载文件: ${file.name}`,
					icon: 'none'
				})
				// TODO: 实现文件下载逻辑
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
	}

	.detail-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.field {
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-start;

		.key {
			color: #666;
			font-size: 28rpx;
			width: 200rpx;
			flex-shrink: 0;
			line-height: 1.5;
		}

		.val {
			color: #333;
			font-size: 28rpx;
			flex: 1;
			line-height: 1.5;
			word-break: break-all;
		}
	}

	.attachment-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);

		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 20rpx;
		}

		.attachment-list {
			.attachment-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background: #f8f9fa;
				border-radius: 12rpx;
				margin-bottom: 16rpx;
				cursor: pointer;
				transition: all 0.3s;

				&:hover {
					background: #e9ecef;
				}

				.file-name {
					margin-left: 20rpx;
					color: #007AFF;
					font-size: 28rpx;
				}
			}
		}
	}

	.mine-navbar-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

		z-index: -1;
	}
</style>